<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
    <link rel="shortcut icon" href="favicon.ico">
    <!-- 引入element-UI样式 -->
    <link rel="stylesheet" href="plugins/element-ui/index.css" />
    <link rel="stylesheet" href="plugins/element-ui/icon/iconfont.css" />
    <!-- 引入CSS -->
    <link rel="stylesheet" href="css/login.css" />
    <link rel="stylesheet" href="css/all.css" />
</head>
<body>
    <div id="login-app">
        <!--头部-->
        <header class="header">
            <span class="pull-left"><small>欢迎访问</small><b>碧蓝外卖后台</b></span>
        </header>
        <!--主体-->
        <div class="container mycontent text-left">
            <!--透明层 -->
            <div class="regDiv" v-loading="loading">
                <p>用户登录</p>
                <div style="margin-top: 70px">
                    <!-- 用户名登录 -->
                    <el-form :model="formUser" mstatus-icon :rules="rules1" ref="formUser" label-width="100px" v-show="switchover"> <!-- ref:表单验证(和提交数据相同) -->
                        <el-form-item label="用户名：" prop="username">  <!-- prop的值与rules里面要验证的字段值是对应 -->
                            <el-input
                                    prefix-icon="el-icon-user" style="width: 250px"
                                    type="text" v-model="formUser.username" autocomplete="off">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="密 码：" prop="password">
                            <el-input
                                    prefix-icon="el-icon-menu"
                                    style="width: 250px" show-password type="password"
                                    v-model="formUser.password" autocomplete="off">
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button el-button type="primary" @click="loginData()" style="margin-right: 100px">登录</el-button>
<!--                            <span class="pull-right"><small>还没有账号？</small><a href="register.html">注册</a></span>-->
                        </el-form-item>
                    </el-form>
                    <!-- 邮箱验证登录 -->
                    <el-form :model="formEmail" mstatus-icon :rules="rules2" ref="formEmail" label-width="100px" v-show="!switchover"> <!-- ref:表单验证(和提交数据相同) -->
                        <el-form-item label="邮箱" prop="email">  <!-- prop的值与rules里面要验证的字段值是对应 -->
                            <el-input
                                    prefix-icon="el-icon-paperclip" style="width: 250px"
                                    type="text" v-model="formEmail.email" autocomplete="off">  <!-- autocomplete:自动补全 -->
                            </el-input>
                        </el-form-item>
                        <el-form-item label="验证码：" prop="verCode">
                            <el-input
                                    prefix-icon="el-icon-menu"
                                    style="width: 250px !important;" type="text"
                                    v-model="formEmail.verCode" autocomplete="off">
                                <el-button slot="append" type="primary" @click="gainVerCode()" :disabled="showTime"><span v-show="showTime">{{downTime}}秒后</span>获取验证码</el-button>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button el-button type="primary" @click="loginEmail()" style="margin-right: 100px">登录</el-button>
                            <span class="pull-right"><small>还没有账号？</small><a href="register.html">注册</a></span>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 切换邮箱验证登录 -->
                <el-link type="success" @click="tradeIn()" style="float: right">{{patternString}}</el-link>
            </div>
        </div>
        <div style="clear: both"></div>
    </div>
</body>
    <!-- 引入VUE组件 -->
    <script src="plugins/vue/vue.js"></script>
    <!-- 引入element-UI组件库 -->
    <script src="plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="plugins/axios/axios.min.js"></script>
    <!-- 引入JS -->
    <script src="js/login.js"></script>
</html>